<template>
  <div style="padding-bottom:40px;padding-top:20px" v-if="zfNameflag">
    <div style="padding:0px 20px;">
      <parklist :getParkDetail="parkChange"></parklist>
    </div>
    <div>
      <el-row type="flex" :gutter="10" style="padding: 0 20px">
        <el-col :span="24">
          <el-card class="box-card tagBallCard" @click.native="toParkSelect()">
            <div class="yingyan">园区鹰眼</div>
              <!-- <div class="title">园区实时影像</div> -->
              <!-- <img src="../../../assets/img/genernal.png" alt="" width="100%" height="300"> -->
              <!-- <a href=# style="font-size:30px;font-weight:bold;position:absolute;top:170px;left:160px;z-index:999;text-shadow: 1px 1px 1px #0b85ff;">园区实时影像</a> -->
            <div class="tagBall" :style="{width: width + 'px',height: height + 'px' }"></div>
          </el-card>
        </el-col>
      </el-row>
        <el-row type="flex" :gutter="10" style="padding: 0 20px;margin-top: 10px">
            <el-col :span="8">
                <el-col :span="24" style="padding: 0">
                    <el-card class="box-card">
                        <div class="title">应急物资总量构成</div>
                        <div style="color: #979797;font-size:14px;text-align: center;">更新时间: {{govMaterialLastReportTime}}</div>
                        <div id="TotalComposition" style="width: 100%;height: 355px"></div>
                        <div class="title" style="margin-top:20px">园区应急物资情况</div>
                        <div id="Growth" style="width: 100%;height: 300px"></div>
                    </el-card>
                </el-col>
            </el-col>
            <el-col :span="16">
                <el-row type="flex" :gutter="10">
                  <el-col :span="12">
                        <el-card class="box-card">
                            <div class="title">危化品统计</div>
                            <div style="overflow:hidden">
                                <el-date-picker
                                    v-model="value1"
                                    @change="value1Change"
                                    style="width: 130px;float:left"
                                    type="month"
                                    value-format="yyyyMM"
                                    placeholder="选择月">
                                </el-date-picker>
                                <div class="legend">
                                    <div>
                                        <span style="background-color:#70AD47"></span>
                                        <span>入库数</span>
                                    </div>
                                    <div>
                                        <span style="background-color:#FE7773"></span>
                                        <span>出库数</span>
                                    </div>
                                    <div>
                                        <span style="background-color:#1492FF"></span>
                                        <span>最大存储量</span>
                                    </div>
                                </div>
                            </div>
                            <div id="Dangerous" style="width: 100%;height: 260px"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div class="title">园区介绍</div>
                            <el-table :data="parkInfo"
                                    ref="table1"
                                    class="customer-table"
                                    :row-style="{height:'32px'}"
                                    :cell-style="{padding:'0px'}"
                                    style="width: 100%"
                                    height="300px"
                                    :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                                <el-table-column type="index" label="排名" width="70px" header-align="center" align="center"></el-table-column>
                                <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称" width="100px"></el-table-column>
                                <el-table-column prop="location" :show-overflow-tooltip="true" label="市区县">
                                  <template scope="scope">
                                      <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{scope.row.cityName}}{{scope.row.districtName}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="parkDetails" label="园区介绍">
                                    <template scope="scope">
                                        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF;cursor: pointer;" @click="showDetail(scope.row)">{{scope.row.parkDetails}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="10" style="margin-top: 10px">
                    <el-col :span="24">
                        <el-card class="box-card">
                            <div class="title">园区告警趋势</div>
                            <div id="Warning" style="width: 100%;height: 340px"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row type="flex" :gutter="10" style="padding: 0 20px;margin-top:10px">
            <el-col :span="8">
                <el-card class="box-card">
                    <div class="title">园区人员和车辆</div>
                    <el-date-picker
                        v-model="value2"
                        @change="value2Change"
                        style="width: 130px;"
                        type="month"
                        value-format="yyyyMM"
                        placeholder="选择月">
                    </el-date-picker>
                    <div style="margin-left: 1.4%;margin-right: 1.4%;display:flex">
                        <div style="margin-top: 50px;margin-left:30px">
                            <img src="@/assets/img/safetyCar.png" width="100px" height="94px"/>
                        </div>
                        <div style="margin-left: 35%">
                            <div style="margin-top: 70px;text-align: center;">
                                <span class="count_sty" style="font-size: 38px;font-weight: 500;color: #333333;">{{carSum}}</span>
                            </div>
                            <div style="margin-top: 5px;text-align: center;">
                                <span class="unit_sty" style="font-size: 16px;font-weight: 500;color: #979797;">总数/辆</span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-left: 1.4%;margin-right: 1.4%;margin-bottom: 20px;display:flex">
                        <div style="margin-top: 50px;margin-left:30px">
                            <img src="@/assets/img/safetyPeople.png" width="100px" height="94px"/>
                        </div>
                        <div style="margin-left: 35%">
                            <div style="margin-top: 70px;text-align: center;">
                                <span class="count_sty" style="font-size: 38px;font-weight: 500;color: #333333;">{{personSum}}</span>
                            </div>
                            <div style="margin-top: 5px;text-align: center;">
                                <span class="unit_sty" style="font-size: 16px;font-weight: 500;color: #979797;">总数/人</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card class="box-card">
                    <div class="title">{{rankingName}}排名</div>
                    <div id="Ranking" style="width: 100%;height: 348px"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row type="flex" :gutter="10" style="padding: 0 20px;margin-top:10px">
            <el-col :span="24">
                <el-card class="box-card">
                    <div class="title">园区排名表(2020)</div>
                    <!-- <el-date-picker
                        v-model="value3"
                        @change="value3Change"
                        style="width: 130px;margin-bottom: 20px"
                        type="month"
                        value-format="yyyyMM"
                        placeholder="选择月">
                    </el-date-picker> -->
                    <el-table :data="rankingList"
                            ref="table2"
                            :key="ranking1"
                            class="customer-table"
                            :row-style="{height:'32px'}"
                            :cell-style="{padding:'0px'}"
                            style="width: 100%"
                            height="300px"
                            :default-sort="{ prop: 'location'}"
                            @sort-change="sortRankChange"
                            :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                        <el-table-column prop="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column>
                        <el-table-column prop="parkOutPut" sortable="custom" :sort-orders="['descending', 'ascending']" :show-overflow-tooltip="true" label="工业总产值(亿元)"></el-table-column>
                        <el-table-column prop="parkLabourProductivity" sortable="custom" :sort-orders="['descending', 'ascending']" label="全员劳动生产率(万元/人)"></el-table-column>
                        <el-table-column prop="parkEntQty" sortable="custom" :sort-orders="['descending', 'ascending']" label="企业数量">
                          <template scope="scope">
                            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492ff;cursor: pointer;" @click="showDetail1(scope.row)">{{scope.row.parkEntQty}}</span>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column prop="parkCasualtiesQty" :sortable="true" :sort-orders="['descending', 'ascending']" label="伤亡人数">
                          <template scope="scope">
                            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492ff;cursor: pointer;" >{{scope.row.parkCasualtiesQty}}</span>
                          </template>
                        </el-table-column> -->
                        <el-table-column prop="parkPersonQty" sortable="custom" :sort-orders="['descending', 'ascending']" label="人员数量">
                          <template scope="scope">
                            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492ff;cursor: pointer;" @click="showDetail3(scope.row)">{{scope.row.parkPersonQty}}</span>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column prop="parkCarQty" sortable="custom" :sort-orders="['descending', 'ascending']" label="车辆数">
                          <template scope="scope">
                            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492ff;cursor: pointer;" @click="showDetail4(scope.row)">{{scope.row.parkCarQty}}</span>
                          </template>
                        </el-table-column> -->
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <el-dialog
        :title="titleName"
        :visible.sync="dialogVisible"
        width="42%"
        center>
        <el-row>
            <el-col :span="4" style="color: #666666;font-size: 16px">园区：</el-col>
            <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.name}}</el-col>
        </el-row>
        <el-row style="margin-top:30px">
            <el-col :span="4" style="color: #666666;font-size: 16px">负责人：</el-col>
            <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.manager}}</el-col>
        </el-row>
        <el-row style="margin-top:30px">
            <el-col :span="4" style="color: #666666;font-size: 16px">园区市县区：</el-col>
            <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.cityName}}{{parkInfoDetail.districtName}}</el-col>
        </el-row>
        <el-row style="margin-top:30px">
            <el-col :span="4" style="color: #666666;font-size: 16px">园区简介：</el-col>
            <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{parkInfoDetail.parkDetails}}</el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
    </el-dialog>
    <el-dialog
      :title="titleName1"
      :visible.sync="dialogVisible1"
      width="42%"
      center>
      <el-table :data="enterpriseCountDetail"
        class="customer-table"
        :row-style="{height:'32px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%"
        height="370px"
        :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
        <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
        <el-table-column prop="checkTime" :show-overflow-tooltip="true" label="起始时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="timeLimit" :show-overflow-tooltip="true" label="到期时间" header-align="center" align="center"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px;text-align: center"
        background
        layout="prev, pager, next"
        :total="pagination1.total"
        :page-size="pagination1.pageSize"
        @current-change="handleCurrentChange1">
      </el-pagination>
    </el-dialog>
    <!-- <el-dialog
      :title="titleName3"
      :visible.sync="dialogVisible3"
      width="42%"
      center>
      <el-table :data="parkEmergencyMaterialDetail"
        class="customer-table"
        :row-style="{height:'32px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%"
        height="370px"
        :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
        <el-table-column prop="materialName" :show-overflow-tooltip="true" label="物资名称" width='90px' header-align="center" align="center"></el-table-column>
        <el-table-column prop="materialCount" :show-overflow-tooltip="true" label="物资数量" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" :show-overflow-tooltip="true" label="统计时间" width='200px' header-align="center" align="center"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px;text-align: center"
        background
        layout="prev, pager, next"
        :total="pagination2.total"
        :page-size="pagination2.pageSize"
        @current-change="handleCurrentChange2">
      </el-pagination>
    </el-dialog> -->
    <el-dialog
      :title="titleName3"
      :visible.sync="dialogVisible3"
      width="42%"
      center>
      <el-table :data="parkGroupPersonCountDetail"
        class="customer-table"
        :row-style="{height:'32px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%"
        height="370px"
        :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
        <el-table-column prop="gateName" :show-overflow-tooltip="true" label="门岗名称" width='90px' header-align="center" align="center"></el-table-column>
        <el-table-column prop="gateKeeper" :show-overflow-tooltip="true" label="保安人员" header-align="center" align="center"></el-table-column>
        <el-table-column prop="subjectCategory" :show-overflow-tooltip="true" label="人员类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="eventType" :show-overflow-tooltip="true" label="进出类型" width='100px' header-align="center" align="center"></el-table-column>
        <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="进出时间" width='250px' header-align="center" align="center"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px;text-align: center"
        background
        layout="prev, pager, next"
        :total="pagination3.total"
        :page-size="pagination3.pageSize"
        @current-change="handleCurrentChange3">
      </el-pagination>
    </el-dialog>
    <el-dialog
      :title="titleName4"
      :visible.sync="dialogVisible4"
      width="42%"
      center>
      <el-table :data="parkGroupCarCountDetail"
        class="customer-table"
        :row-style="{height:'32px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%"
        height="370px"
        :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
        <el-table-column prop="gateName" :show-overflow-tooltip="true" label="门岗名称" width='90px' header-align="center" align="center"></el-table-column>
        <el-table-column prop="gateKeeper" :show-overflow-tooltip="true" label="保安人员" header-align="center" align="center"></el-table-column>
        <el-table-column prop="subjectCategory" :show-overflow-tooltip="true" label="车辆类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="eventType" :show-overflow-tooltip="true" label="进出类型" width='90px' header-align="center" align="center"></el-table-column>
        <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="进出时间" width='200px' header-align="center" align="center"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px;text-align: center"
        background
        layout="prev, pager, next"
        :total="pagination4.total"
        :page-size="pagination4.pageSize"
        @current-change="handleCurrentChange4">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi'
const echarts = require('echarts')
export default {
  components: { parklist },
  data () {
    return {
      dialogVisible: false, // 园区基本信息
      dialogVisible1: false, // 企业
      dialogVisible2: false, // 伤亡
      dialogVisible3: false, // 人员
      dialogVisible4: false, // 车辆
      titleName: '园区信息详情',
      titleName1: '企业数量排名详情',
      titleName2: '伤亡人数排名详情',
      titleName3: '人员数量排名详情',
      titleName4: '车辆数排名详情',

      parkInfoDetail: {},
      carSum: '', // 车辆总数
      personSum: '', // 人员总数

      pagination1: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination2: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination3: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pagination4: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      parkInfo: [], // 园区基本信息
      enterpriseCountDetail: [], // 企业数量详情
      eachParkCasualtiesDetail: [], // 伤亡人数
      parkGroupPersonCountDetail: [], // 人员排名详情
      parkGroupCarCountDetail: [], // 车辆排名详情
      
      value1: '',
      value2: '',
      value3: '',
      myChart1: '',
      option1: '',
      option1Data: [],
      myChart2: '',
      option2: '',
      myChart3: '',
      option3: '',
      myChart4: '',
      option4: '',
      myChart5: '',
      option5: '',
      govMaterialLastReportTime: '',
      rankingList: [],
      rankingName: '工业总产值',
      rankingType: '',
      sort: '',
      ranking1: '',

      dataList: ['中国杭州','数字经济','安全生产','科技创新','智能管控','云端互联','security','Digital economy','technological innovation','efficiency','中国杭州','数字经济','安全生产','科技创新','智能管控','云端互联','security','Digital economy','technological innovation','efficiency','中国杭州','数字经济','安全生产','科技创新','智能管控','云端互联','security','Digital economy','technological innovation','efficiency'],
      contentEle: [],
      color: ['#FFFFFF'],
      width: 1000,
      height: 160,
      direction: '-1',
      speed: 600,
      wordCloud: null,
      zfNameflag: true,
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted () {
    this.getDate()  // 获取时间 年月
    this.init()  // 初始化数据
    this.getright_table()
    this.innit()
    this.value2Change()
    this.value3Change()
    this.wordCloud = setInterval(() => {
      this.init1()
    }, 10)
  },
  beforeDestroy () {
    clearInterval(this.wordCloud)
  },
  methods: {
    // 切换园区
    parkChange (data) {
      // if (data.code === 'ZJYQ-330182-01') {
      //   window.open('http://10.33.60.49:9090/IIP/login')
      //   return false
      // }
      sessionStorage.setItem('routeName1', data.coordinateList[0].name)
      this.$router.push({
        name: 'zfParkDetailLink',
        query: {
          data: data
        }
      })
    },
    getDate () {
      this.value1 = this.value2 = this.value3 = new Date()
      this.value3 = new Date().getFullYear()-1+ '-12'
    },
    showDetail (name) {
      this.parkInfoDetail = { ...name }
      this.titleName = this.parkInfoDetail.name + '园区信息详情'
      this.dialogVisible = true
    },
    showDetail1 (code) { // 企业
      this.parkInfoDetail = { ...code }
      this.enterpriseCountDetail = []
      this.dialogVisible1 = true
      this.pagination1.currentPage = 1
      this.pagination1.total = 0
      this.handleCurrentChange1()
    },
    // 翻页
    handleCurrentChange1 (val) {
      if (val && val !== null) {
        this.pagination1.currentPage = val
      }
      let params = {
        months:  this.value3,
        parkCode: this.parkInfoDetail.parkCode,
        limit:  10,
        page: this.pagination1.currentPage
      }
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkEnterpriseDetail`, params)
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.pagination1.total = Number(res.data.count)
            let arr = []
            res.data.data.forEach(item => {
              if (item.timeLimit === null) {
                item.timeLimit = '--'
              }
              if (item.checkTime === null) {
                item.checkTime = '--'
              }
              if (item.entName !== null) {
                arr.push({
                  entName:item.entName,
                  checkTime: item.checkTime,
                  timeLimit:item.timeLimit
                })
              }
            })
            this.enterpriseCountDetail = arr
          }
        })
    },
    toParkSelect(){
      this.$router.push({
        name: 'zfParkAerialView'
      })
    },
    // showDetail2 (code) { // 伤亡排名
    //   this.parkInfoDetail = { ...code }
    //   this.eachParkCasualtiesDetail = []
    //   this.dialogVisible2 = true
    //   this.pagination2.currentPage = 1
    //   this.pagination2.total = 0
    //   this.handleCurrentChange2()
    // },
    // // 翻页
    // handleCurrentChange2 (val) {
    //   if (val && val !== null) {
    //     this.pagination2.currentPage = val
    //   }
    //   let params = {
    //     months:  this.value3,
    //     parkCode: this.parkInfoDetail.code,
    //     limit:  10,
    //     page: this.pagination2.currentPage
    //   }
    //   this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkCasualtiesDetail`, params)
    //     .then(({ data: res }) => {
    //       if (res.code === 0) {
    //         this.pagination2.total = Number(res.data.count)
    //         let arr = []
    //         res.data.data.forEach(item => {
    //           if (item.timeLimit === null) {
    //             item.timeLimit = '--'
    //           }
    //           if (item.checkTime === null) {
    //             item.checkTime = '--'
    //           }
    //           if (item.entName !== null) {
    //             arr.push({
    //               entName:item.entName,
    //               checkTime: item.checkTime,
    //               timeLimit:item.timeLimit
    //             })
    //           }
    //         })
    //         this.eachParkCasualtiesDetail = arr
    //       }
    //     })
    // },

    showDetail3 (code) { // 人员数量
      this.parkInfoDetail = { ...code }
      this.enterpriseCountDetail = []
      this.dialogVisible3 = true
      this.pagination3.currentPage = 1
      this.pagination3.total = 0
      this.handleCurrentChange3()
    },
    // 翻页
    handleCurrentChange3 (val) {
      if (val && val !== null) {
        this.pagination2.currentPage = val
      }
      let params = {
        months:  this.value3,
        parkCode: this.parkInfoDetail.parkCode,
        limit:  10,
        page: this.pagination3.currentPage
      }
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkPersonDetail`, params)
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.pagination3.total = Number(res.data.data.count)
          let arr = []
          res.data.data.forEach(item => {
            if (item.subjectCategory === 0) {
              item.subjectCategory = '园区员工'
            } else if (item.subjectCategory === 1) {
              item.subjectCategory = '项目人员'
            } else if (item.subjectCategory === 2) {
              item.subjectCategory = '访客'
            }
            if (item.eventType === 0) {
              item.eventType = '进入'
            } else if (item.eventType === 1) {
              item.eventType = '离开'
            }
            if (item.gateName !== null || 
                item.gateKeeper !== null || 
                item.subjectCategory !== null || 
                item.eventType !== null || 
                item.eventTime !== null ) {
              arr.push({
                gateName:item.gateName,
                gateKeeper:item.gateKeeper,
                subjectCategory:item.subjectCategory,
                eventType:item.eventType,
                eventTime:item.eventTime
              })
            }
          })
          this.parkGroupPersonCountDetail = arr
        }
      })
    },
    
    showDetail4 (code) { // 车辆数量
      this.parkInfoDetail = { ...code }
      this.parkGroupCarCountDetail = []
      this.dialogVisible4 = true
      this.pagination4.currentPage = 1
      this.pagination4.total = 0
      this.handleCurrentChange4()
    },
    // 翻页
    handleCurrentChange4 (val) {
      if (val && val !== null) {
        this.pagination4.currentPage = val
      }
      let params = {
        months:  this.value3,
        parkCode: this.parkInfoDetail.parkCode,
        limit:  10,
        page: this.pagination4.currentPage
      }
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkCarDetail`, params)
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.pagination4.total = Number(res.data.count)
          let arr = []
          res.data.data.forEach(item => {
            if (item.subjectCategory === 0) {
                item.subjectCategory = '普通⻋辆'
              } else if (item.subjectCategory === 1) {
                item.subjectCategory = '危化品运⾏⻋辆'
              } else if (item.subjectCategory === 2) {
                item.subjectCategory = '货运⻋辆'
              }
              if (item.eventType === 0) {
                item.eventType = '进入'
              } else if (item.eventType === 1) {
                item.eventType = '离开'
              }
              if (item.gateName !== null || 
                  item.gateKeeper !== null || 
                  item.subjectCategory !== null || 
                  item.eventType !== null || 
                  item.eventTime !== null ) {
                arr.push({
                  gateName:item.gateName,
                  gateKeeper:item.gateKeeper,
                  subjectCategory:item.subjectCategory,
                  eventType:item.eventType,
                  eventTime:item.eventTime
                })
              }
          })
          this.parkGroupCarCountDetail = arr
        }
      })
    },
    value1Change () {
      this.$http.post(`/home/chemical/parkInfoGovPage/getEachParkDangerTotalList`,{
           "months": this.value1,
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.option3.series[0].data = res.data.govEachParkDangerTotal.govEachParkDangerParkInbound.map((item,index) => {
              item = item / 10000
              return item
            })
            this.option3.series[1].data = res.data.govEachParkDangerTotal.govEachParkDangerParkTotal.map((item,index) => {
              item = item / 10000
              return item
            })
            this.option3.series[2].data = res.data.govEachParkDangerTotal.govEachParkDangerParkOutbound.map((item,index) => {
              item = item / 10000
              return item
            })
            this.option3.yAxis[0].data = res.data.govEachParkDangerTotal.govEachParkDangerParkName
            this.myChart3.setOption(this.option3)
          }
        })
    },
    value2Change () {
      let date = new Date(this.value2)
      let year = String(date.getFullYear())
      let month = date.getMonth()+1
      if (month < 10) {
        month = '0'+ month
      }
       this.$http.post(`/home/chemical/parkInfoGovPage/getGovAllParkPersonAndCarMap`,{
           "months": year+ month,
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.carSum = res.data.govAllParkPersonAndCar.govAllParkCarSum
            this.personSum = res.data.govAllParkPersonAndCar.govAllParkPersonSum
          }
        })
    },
    value3Change () {
       this.$http.post(`/home/chemical/parkInfoGovPage/getGovEachParkRankingMap`,{
           "months": this.value3,
           "rankingType": this.rankingType,
           "sort": this.sort
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.option5.xAxis.data = res.data.govEachParkRanking.govEachParkRanking.govEachParkRankingName
            this.option5.series[0].data = res.data.govEachParkRanking.govEachParkRanking.govEachParkRankingValue
            this.myChart5.setOption(this.option5)
            res.data.govEachParkRanking.govEachParkAllRanking.forEach((item,index) =>{
              this.$set(this.rankingList,index,item)
            })
            this.ranking1 = Math.random()
            // this.rankingList = res.data.govEachParkRanking.govEachParkAllRanking
          }
        })
    },
    sortRankChange(item) {
      this.rankingName = item.column.label
      this.rankingType = item.prop
      this.sort = item.order
      this.value3Change()
    },
    init () {
        this.getTotalComposition()
        this.getGrowth()
        this.getDangerous()
        this.getWarning()
        this.getRanking()
        this.getData()
    },
    getData() {
      this.$http.post(`/home/chemical/parkInfoGovPage/getParkManagementInit`,{
           "months": this.value1,
        })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.govMaterialLastReportTime = res.data.govMaterialLastReportTime
            let arr1 = []
            res.data.govAllParkMaterialTotal.forEach(item => {
              arr1.push({
                value: item.materialCount,
                name: item.materialTypeName
              })
            })
            this.option1.series[0].data = arr1
            this.option1Data = arr1
            this.myChart1.setOption(this.option1)

            let arr2 = []
            let arr22 = []
            res.data.govEachParkMaterialTotal.forEach(item => {
              arr2.push(item.total)
              arr22.push(item.parkName)
            })
            this.option2.series[0].data = arr2
            this.option2.xAxis.data = arr22
            this.myChart2.setOption(this.option2)

            // let arr3 = []
            // res.data.govEachParkDangerTotal.govEachParkDangerValue.forEach(item => {
            //   arr3.push(item.total)
            //   arr33.push(item.parkName)
            // })
            // this.option3.series[0].data = arr3
            this.option3.series[0].data = res.data.govEachParkDangerTotal.govEachParkDangerParkInbound.map((item,index) => {
              item = item / 10000
              return item
            })
            this.option3.series[1].data = res.data.govEachParkDangerTotal.govEachParkDangerParkTotal.map((item,index) => {
              item = item / 10000
              return item
            })
            this.option3.series[2].data = res.data.govEachParkDangerTotal.govEachParkDangerParkOutbound.map((item,index) => {
              item = item / 10000
              return item
            })
            this.option3.yAxis[0].data = res.data.govEachParkDangerTotal.govEachParkDangerParkName
            this.myChart3.setOption(this.option3)

            let arr4 = []
            res.data.govEachParkAlarmTrend.govEachParkAlarmTrendValue.forEach(item => {
              arr4.push({
                name: item.parkName,
                type: 'line',
                data: item.data,
              })
            })
            this.option4.series = arr4
            this.myChart4.setOption(this.option4)

            this.parkInfo = res.data.govParkInfo
            // this.carSum = res.data.govAllParkPersonAndCar.govAllParkCarSum
            // this.personSum = res.data.govAllParkPersonAndCar.govAllParkPersonSum
            
            // this.option5.xAxis.data = res.data.govEachParkRanking.govEachParkRanking.govEachParkRankingName
            // this.option5.series[0].data = res.data.govEachParkRanking.govEachParkRanking.govEachParkRankingValue
            // this.myChart5.setOption(this.option5)

            // this.rankingList = res.data.govEachParkRanking.govEachParkAllRanking
            // res.data.govEachParkDangerTotal
          }
        })
    },
    getTotalComposition () {
      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      let charPiecurrentIndex = 0
      _this.myChart1 = echarts.init(document.getElementById('TotalComposition'))
      _this.option1 = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          top: '80%',
          left: 'center',
          type: 'scroll'
        },
        // color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            type: "pie",
            radius: ['55%', '70%'],
            center: ["50%", "40%"],
            legendHoverLink: false,
            label: {
              //标识
              normal: {
                show: false,
                position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      _this.myChart1.setOption(_this.option1);
      // 鼠标移动上去的时候的高亮动画
      _this.myChart1.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts);
        //取消之前高亮图形
        _this.myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        _this.myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        
        _this.myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        _this.myChart1.resize();
      })

      //自动高亮显示
      var chartHover = function() {
        var dataLen = _this.option1.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        charPiecurrentIndex = (charPiecurrentIndex+ 1) % dataLen;
         
        // 高亮当前图形
        _this.myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        _this.myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this.startCharts = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart1.on("mouseout", function(param) {
        if (!flag) {
          _this.startCharts = setInterval(chartHover, 2000);
          flag = true;
        }
      })
    },
    getGrowth () {
        this.myChart2 = echarts.init(document.getElementById('Growth'))
        this.option2 = {
          tooltip: {
                trigger: 'axis'
            },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'inside',
              startValue: 0,
              endValue: 8,
              xAxisIndex: [0],
              zoomLock: true
            }
          ],
          xAxis: {
            type: 'category',
            axisLabel:{
              interval:0,
              rotate:45
            },
            data: []
          },
          yAxis: {
              type: 'value'
          },
          animationDuration: 5000,
          series: [{
              data: [],
              type: 'bar'
          }]
        }
        this.myChart2.setOption(this.option2)
    },
    getDangerous () {
        this.myChart3 = echarts.init(document.getElementById('Dangerous'))
        this.option3 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            // legend: {
            //     data: ['入库数', '出库数', '总量']
            // },
            grid: {
                top: '1%',
                left: '1%',
                right: '12%',
                bottom: '1%',
                containLabel: true
            },
            dataZoom: [
              {
                type: 'inside',
                startValue: 0,
                endValue: 6,
                yAxisIndex: [0],
                zoomLock: true
              }
            ],
            xAxis: [
                {
                    // name: '(万元)',
                    type: 'value',
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel:{
                      interval:0,
                    },
                    data: []
                }
            ],
            animationDuration: 5000,
            series: [
                {
                    name: '入库数',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [],
                    itemStyle: {
                      normal: {
                          color: '#70AD47'
                      }
                    }
                },
                {
                    name: '最大存储量',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [],
                    itemStyle: {
                      normal: {
                          color: '#1492FF'
                      }
                    }
                },
                {
                    name: '出库数',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'left'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [],
                    itemStyle: {
                      normal: {
                          color: '#FE7773'
                      }
                    }
                }
            ]
        }
        this.myChart3.setOption(this.option3)
    },
    getWarning () {
        this.myChart4 = echarts.init(document.getElementById('Warning'))
        this.option4 = {
            tooltip: {
              trigger: 'axis',
              position: function(point, params, dom, rect, size){
                //其中params为当前鼠标的位置
                return [point[0],0];
              }
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 0,
              // selected:
            },
            grid: {
                left: '3%',
                right: '18%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                  interval:0,
                  rotate:45
                },
                data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
                type: 'value'
            },
            animationDuration: 5000,
            series: []
        }
        this.myChart4.setOption(this.option4)
    },
    getRanking () {
        this.myChart5 = echarts.init(document.getElementById('Ranking'))
        this.option5 = {
            tooltip: {
              trigger: 'axis'
            },
            dataZoom: [
            {
              type: 'inside',
              startValue: 0,
              endValue: 8,
              xAxisIndex: [0],
              zoomLock: true
            }
          ],
            xAxis: {
              type: 'category',
              axisLabel:{
                interval:0,
                rotate:45
              },
              data: []
            },
            yAxis: {
                type: 'value'
            },
            animationDuration: 5000,
            series: [{
                data: [],
                type: 'bar'
            }]
        }
        this.myChart5.setOption(this.option5)
    },
    getright_table(){
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, "mouseenter", function() {
        isScroll = false
      })
      this.addEvent(divData, "mouseleave", function() {
        isScroll = true
      })
      setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent(obj,sEvent,fn){
      if(obj.attachEvent){
        obj.attachEvent("on"+sEvent,fn)
      }else{
        obj.addEventListener(sEvent,fn,false)
      }
    },
    innit() {
      const radiusX = (this.width - 50) / 2
      const radiusY = (this.height - 50) / 2
      this.contentEle = []
      for (let i = 0; i < this.dataList.length; i += 1) {
        const k = -1 + (2 * (i + 1) - 1) / this.dataList.length
        const a = Math.acos(k)
        const b = a * Math.sqrt(this.dataList.length * Math.PI)
        const x = radiusX * Math.sin(a) * Math.cos(b)
        const y = radiusY * Math.sin(a) * Math.sin(b)
        const z = radiusX * Math.cos(a)
        const singleEle = {
          x,
          y,
          z,
          style: {},
        }
        this.contentEle.push(singleEle)
      }
      this.animate()
    },
    animate() {
      this.rotateX()
      this.rotateY()
      this.move()
      window.requestAnimationFrame(this.animate)
    },
    rotateX() {
      const angleX = ['-1', '1'].includes(this.direction)
        ? Math.PI / Infinity
        : Math.PI / ((Number(this.direction) / 2) * Number(this.speed))
      const cos = Math.cos(angleX)
      const sin = Math.sin(angleX)
      this.contentEle = this.contentEle.map((t) => {
        const y1 = t.y * cos - t.z * sin
        const z1 = t.z * cos + t.y * sin
        return {
          ...t,
          y: y1,
          z: z1,
        }
      })
    },
    rotateY() {
      const angleY = ['-2', '2'].includes(this.direction)
        ? Math.PI / Infinity
        : Math.PI / (Number(this.direction) * Number(this.speed))
      const cos = Math.cos(angleY)
      const sin = Math.sin(angleY)
      this.contentEle = this.contentEle.map((t) => {
        const x1 = t.x * cos - t.z * sin
        const z1 = t.z * cos + t.x * sin
        return {
          ...t,
          x: x1,
          z: z1,
        }
      })
    },
    move() {
      const CX = this.width / 2
      const CY = this.height / 2
      this.contentEle = this.contentEle.map((singleEle) => {
        const { x, y, z } = singleEle
        const fallLength = 500
        const RADIUS = (this.width - 50) / 2
        const scale = fallLength / (fallLength - z) >= 1.5 ? 1.5:fallLength / (fallLength - z)
        const alpha = (z + RADIUS) / (2 * RADIUS)
        const left = `${x + CX - 15}px`
        const top = `${y + CY - 15}px`
        const transform = `translate(${left}, ${top}) scale(${scale})`
        const style = {
          ...singleEle.style,
          opacity: alpha + 0.5,
          zIndex: parseInt(scale * 100, 10),
          transform,
        }
        return {
          x,
          y,
          z,
          style
        }
      })
    },
    init1() {
      var html_ = ''
      this.$nextTick(()=>{
        for (var i = 0; i < this.dataList.length; i++) {
          let color_ = this.color[i % this.color.length]
          html_ += '<span class="wordCloud__tag" style="display:block;position: absolute;left: 0px;top: 0px;color:' + color_ + ';opacity:' + this.contentEle[i].style.opacity + ';transform:' + this.contentEle[i].style.transform + ';zIndex:' + this.contentEle[i].style.zIndex + '">' + this.dataList[i] + '</span>'
        }
        $('.tagBall').html(html_)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.securitybottom {
  .safePersonCount {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
  .warnControll {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 40px 10px 40px;
  }
}
.majorHazardAnalysis_charts{
  width: 100%;
  padding: 20px 0px 20px 0px;
}
.subject{
  width: 100%;
  .tab{
    display: flex;
    justify-content:flex-start;
    margin-top: 20px;
    .Unit{
      padding: 0 40px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      margin-left: 1.4%;
      padding-bottom: 20px;
    }
    .matchingCompany{
      padding: 0 12px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
    }
  }
}
.Unit-title{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    color: #333333;
}
.select{
    width: 110px;
    margin-top: 15px;
    margin-left: 40px;
}
.pagination{
    margin-top:20px;
    margin-left:40%;
}
.primaryButton {
  color: #FFFFFF;
  background-color: #1492ff;
  border-color: #1492ff;
}
/deep/ .el-dialog__title {
  font-weight: 700;
  font-size: 16px;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
.el-col-19 {
  margin-top: 4px;
}
.title{
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    font-weight: 700;
}
.legend{
  float:left;
  margin-left: 20px;
  height:40px;
  line-height:40px;
  overflow:hidden;
  div{
    float:left;
    margin-left: 10px;
    overflow: hidden;
    span:nth-child(1){
      float: left;;
      width:25px;
      height:15px;
      border-radius: 3px;
      margin-right: 5px;
      margin-top: 12px;
    }
    span:nth-child(2){
      float: left;
      font-size: 12px
    }
  }
}
.tagBallCard{
  background: url('../../../assets/img/GIF/GIF科技光感效果电商banner背景.gif');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.tagBall {

  margin: 0 auto;

  position: relative;
  // overflow: hidden;

  // background: url('../../../assets/img/GIF/GIF科技光感效果电商banner背景.gif');

  // background-position: center;

  // background-repeat: no-repeat;

  // background-size: contain;

}



.wordCloud__tag {

  display: block;

  position: absolute;

  left: 0px;

  top: 0px;

  color: green;

  text-decoration: none;

  font-size: 14px;

  font-family: '微软雅黑';

  font-weight: bold;



}
.yingyan{
  width:160px;
  height: 36px;
  text-align: center;
  position:absolute;
  color:#FFFFFF;
  z-index:999;
  text-shadow: 1px 1px 1px #0b85ff;
  font-size:30px;
  top:50%;
  margin-top: -18px;
  left: 50%;
  margin-left: -80px;
}
// .wordCloud__tagBall {
//   margin: 50px auto;
//   position: relative;
// }

// .wordCloud__tag {
//   display: block;
//   position: absolute;
//   left: 0px;
//   top: 0px;
//   color: green;
//   text-decoration: none;
//   font-size: 15px;
//   font-family: '微软雅黑';
//   font-weight: bold;
//   cursor: pointer;
// }

// .wordCloud__tag:hover {
//   color: red !important;
// }
</style>
